<template>
 <div style="height:95vh;">
  <div style="padding-top: 0.5rem">
    <i style="font-size: 1rem" class="iconfont icon-fanhui"></i>
    <span style="margin-left: 35%">万枫预定</span>
  </div>
  <!--  轮播图-->
  <div style="margin-top: 0.5rem">
    <el-carousel trigger="click" height="10rem" indicator-position="none" motion-blur>
      <el-carousel-item v-for="item in hotel_images" :key="item" >
        <img :src="item" alt="" style="width: 100%;height:100%">
      </el-carousel-item>
    </el-carousel>
  </div>
  <!--  中间的展示-->
  <div class="twocon">
    <h5>宏达万枫酒店</h5>
    <div class="hotel_labels">
      <el-button plain>舒适</el-button>
      <el-button plain>森林院子</el-button>
      <el-button plain>独栋</el-button>
      <el-button plain>私密</el-button>
      <el-button plain>山水之间</el-button>
      <!-- 导航+电话    -->
      <div class="twotell_map">
        <div @click="gomapplace">
          <i class="iconfont icon-ditu">一键导航</i>

        </div>
        <div>|</div>
        <div>
          <i class="iconfont icon-dianhua">联系电话</i>
        </div>
      </div>
      <!--      分割线-->
      <div style="width: 100%; height:0.3rem;background-color: #e8e4e4"></div>
      <!--展示物品-->
    </div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" stretch>
      <el-tab-pane label="客房预定" name="first">
        <div style="height: 40vh;overflow: auto;scrollbar-width:none">
          <Room_reservation></Room_reservation>
        </div>
      </el-tab-pane>
      <el-tab-pane label="餐饮预定" name="second">
         <div style="height: 40vh;overflow: auto;scrollbar-width:none">
           <Eating_reservation></Eating_reservation>
        </div>

      </el-tab-pane>

    </el-tabs>

  </div>

 </div>
</template>

<script setup lang='ts'>
import {ref, reactive} from 'vue'
import Room_reservation from "./Room_reservation.vue";
import {useRouter} from "vue-router";
import Eating_reservation from "./Eating_reservation.vue";

const gomapplace = () => {
  router.push('/admin/mapplace')
}
const hotel_images = ref([
  'https://gd-hbimg.huaban.com/17f2a2325d149910d48e216fcbb09bafd496d4583d47d-wIWJfu_fw480webp',
  "https://gd-hbimg.huaban.com/47caa9434b7668391d196c1c30161dc5ce08a9edd54f-N9M0U3_fw480webp",
  "https://gd-hbimg.huaban.com/edd5e114db3e58b69d2e59059a4b277ee548755638257-yAR57v_fw480webp",
  "https://gd-hbimg.huaban.com/a70b6e50255ac5d081e4b95167923708cd311a9e1aa6c-GGLDQr_fw480webp",
])

// 内容展示
const activeName = ref('first')
const handleClick = (tab, event) => {
  console.log(tab, event)
}
const router = useRouter()
</script>
<style lang='scss' scoped>

.twocon {
  margin: 0 auto;
  width: 100%;
  text-align: center;

  .hotel_labels {
    width: 100%;
    display: inline-block;
    margin-top: 0.5rem;
  }

  .twotell_map {
    display: flex;
    width: 50%;
    margin: 0 auto;
    height: 1.5rem;
    justify-content: space-around;
    color: #00b0b7;
    font-size: 1rem;
    margin-top: 0.5rem;
  }
}

.demo-tabs {
  width: 100%;

  el-tab-pane {
    width: 50%;
  }
}
</style>
